<template>
  <!-- 金融诉求编辑页 -->
  <div class="layout">
    <ContainerTitle text="金融诉求编辑页"></ContainerTitle>
    <el-form
      class="formDiv"
      ref="ruleForm"
      :rules="rules"
      :model="ruleForm"
      label-width="110px"
      style="text-align: left"
    >
      <div class="l-title">诉求基本信息</div>
      <el-form-item label="诉求名称：" prop="title">
        <el-input
          placeholder="请输入"
          v-model.trim="ruleForm.title"
          maxlength="30"
          style="width: 360px"
        ></el-input>
        <span style="font-size: 14px; color: #999; margin-left: 10px"
          >输入字符不超过30个字符</span
        >
      </el-form-item>
      <el-form-item label="联系人：" prop="contacts">
        <el-input
          placeholder="请输入"
          v-model.trim="ruleForm.contacts"
          maxlength="10"
          style="width: 360px"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="contactNumber">
        <el-input
          placeholder="请输入"
          v-model.trim="ruleForm.contactNumber"
          maxlength="11"
          style="width: 360px"
        ></el-input>
      </el-form-item>
      <el-form-item label="金融类型：" prop="financeType">
        <el-select
          v-model.trim="ruleForm.financeType"
          placeholder="请选择"
          style="width: 360px"
          @change="financialTypeChange"
        >
          <el-option label="延期还本付息" value="2"></el-option>
          <el-option label="其他" value="9"></el-option>
        </el-select>
        <span style="font-size: 14px; color: #999; margin-left: 10px"
          >选择其他弹出下面的输入框</span
        >
      </el-form-item>
      <el-form-item v-if="otherShow" label="其他：">
        <el-input
          placeholder="请输入"
          v-model.trim="ruleForm.financeOtherDesc"
          style="width: 360px"
        ></el-input>
      </el-form-item>

      <div class="l-title">诉求原因</div>
      <el-form-item label="诉求原因：" prop="appealReason">
        <el-input
          placeholder="请输入"
          type="textarea"
          resize="none"
          :maxlength="300"
          :autosize="{ minRows: 5, maxRows: 10 }"
          v-model.trim="ruleForm.appealReason"
          :show-word-limit="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="诉求文件上传：" style="margin-bottom: 0px">
        <addUpload @changeUp="changeUp" :fileList="fileList"></addUpload>
      </el-form-item>
    </el-form>
    <div class="btn-bottom">
      <Buttons :buttons="buttons" @goBack="goBack" @save="submitForm('ruleForm', 0)" @send="submitForm('ruleForm', 1)"></Buttons>
      <!-- <div class="cancelBtn" @click="goBack()">取消</div>
      <div class="sendBtn" @click="submitForm('ruleForm', 0)">保存</div>
      <div class="sendBtn" @click="submitForm('ruleForm', 1)">申请</div> -->
    </div>
  </div>
</template>
<script>
import addUpload from "@/components/financiaUpload";
import financeAppealEditRules from '@/formRules/financial/financeAppealEditRules.js'
import { getAppealDetails, getFileData, appealUpdate } from "@/common/api/company.js";
export default {
  mixins: [financeAppealEditRules],
  data() {
    return {
      buttons:[
        { text: "取消", type: "normal", size: "l", method: "goBack" },
        { text: "保存", type: "success", size: "l", method: "save" },
        { text: "申请", type: "success", size: "l", method: "send" },
      ],
      name: "finance",
      // crumbs: [
      //   {
      //     label: "企业空间",
      //     value: "company",
      //   },
      //   {
      //     label: "金融服务",
      //     value: "",
      //   },
      //   {
      //     label: "我的金融诉求",
      //     value: "myFinanceProductAppeal",
      //   },
      //   {
      //     label: "金融诉求编辑页",
      //     value: "myFinanceProductAppealEdit",
      //     choose: true,
      //   },
      // ],
      fileBatchId: "",
      otherShow: false,
      id: null,
      fileList: []
    };
  },
  components: {
    addUpload,
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getList();
    }
  },
  methods: {
    /**
     * 返回上一页
     */
    goBack: function () {
      this.$router.back();
    },
    // 金融类型选择切换
    financialTypeChange(e) {
      if (e == 9) {
        this.otherShow = true;
      } else {
        this.otherShow = false;
      }
    },
    // 获取详情页数据
    async getList() {
      let res = await getAppealDetails(this.id);
      if (res.code == 200) {
        this.ruleForm = {
          title: res.data.title,
          contacts: res.data.contacts,
          contactNumber: res.data.contactNumber,
          financeType: res.data.financeType,
          financeOtherDesc: res.data.financeOtherDesc,
          appealReason: res.data.appealReason,
        };
        this.agetFile(res.data.fileBatchId);
      }
    },
    // 附件列表
    async agetFile(id) {
      let param = {
        batchId: id,
      };
      let res = await getFileData(param);
      if (res.rows.length) {
        console.log("res.rows", res.rows);
        this.fileList = res.rows;
        if (this.fileList.length) {
          //  console.log('12', this.form.fileBatchId)
          this.ruleForm.fileBatchId = res.rows[0].batchId;
          // console.log('this.ruleForm',this.ruleForm)
        }
      }
    },
    // 附件上传方法
    changeUp(obj) {
      console.log("obj", obj);
      if (obj.length) {
        this.ruleForm.fileBatchId = obj[0].batchId;
      }
      this.fileList = [];
    },
    submitForm(formName, type) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.state = type;
          this.ruleForm.id = this.id;
          // console.log('ruleForm',this.ruleForm)
          this.subAppeal(this.ruleForm, type);
        }
      });
    },
    /**
     * 企业诉求触发
     * @param {void}
     * @return {void}
     */
    subAppeal(obj, type) {
      let text = "";
      if (type == 1) {
        text = "您确定做此次操作，申请之后将进入下一阶段，并无法取消?";
      } else {
        text = "您确定做此次操作，保存本次数据,,不申请?";
      }
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.getAppeal(obj, type);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    async getAppeal(obj, type) {
      let res = await appealUpdate(obj);
      if (res.code == 200) {
        // this.$message.success("申请成功");
        this.$message.success(`${type == 1 ? "申请成功" : "保存成功"}`);
        this.$router.back();
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
  margin-bottom: 50px;
}

.l-title {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  text-align: left;
  background: #f1f2f4;
  padding: 12px 20px;
  margin-bottom: 24px;
}

.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.material {
  display: flex;
  align-items: center;
}
.material span:first-of-type {
  margin-right: 10px;
}
.material span:last-of-type {
  color: #045db9;
  cursor: pointer;
}

.btn-bottom {
  text-align: center;
  margin: 70px 0 150px;
}
.btn-bottom .cancelBtn {
  border: 1px solid #eeeeee;
  display: inline-block;
  font-size: 14px;
  padding: 10px 46px;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
}
.btn-bottom .cancelBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}
.btn-bottom .sendBtn {
  padding: 10px 46px;
  background-color: #045db9;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px;
  transition: all 0.2s ease 0s;
  margin-right: 10px;
}
.btn-bottom .sendBtn:hover {
  box-shadow: 0px 5px 5px #e1e1e1;
  cursor: pointer;
}
</style>